<template>
  <div class="sensor">
    <div class="tools">
      <div class="tools-row">
        <el-select
          :disabled="loading"
          v-model="search.sensorType"
          placeholder="传感器类型"
          size="large"
          clearable
        >
          <el-option
            v-for="item in typeList"
            multiple
            :key="item.id"
            :label="item.label"
            :value="item.id"
          />
        </el-select>
        <el-select
          :disabled="loading"
          v-model="search.sensorStatus"
          placeholder="传感器状态"
          size="large"
          clearable
        >
          <el-option
            v-for="item in statusList"
            multiple
            :key="item.id"
            :label="item.label"
            :value="item.id"
          />
        </el-select>
      </div>
      <el-input
        :disabled="loading"
        v-model="search.sensorName"
        placeholder="请输入传感器名称"
        size="large"
      >
        <template #append>
          <el-button :icon="Search" />
        </template>
      </el-input>
    </div>
    <list
      :list="listData"
      :status="baseSearch.status"
      v-loading="loading"
      @scrollLoad="scrollLoad"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'
import list from './list.vue'
import { getMineralDictList, getSensorStatusDict } from '@/api/dict'
import { getSensorList } from '@/api/sensor'
import { useListData } from '@/hooks/useListData'
// 定义搜索参数的类型
interface SearchParams {
  sensorName: string
  sensorStatus: string | number | null
  sensorType: string | number | null
}

// 传感器类型列表
const typeList = ref<{ id: string | number; label: string }[]>([])

// 传感器状态列表
const statusList = ref<{ id: string | number; label: string }[]>([])
// 使用列表数据 hook
const { search, baseSearch, listData, loading, scrollLoad } = useListData<SearchParams>({
  fetchData: getSensorList,
  initialSearchParams: {
    sensorName: '',
    sensorStatus: null,
    sensorType: null
  },
  enableAutoRefresh: true,
  refreshInterval: 60000
})
// 组件挂载时获取字典数据
onMounted(async () => {
  // 并行获取区域列表、传感器类型和状态字典
  const [types, status] = await Promise.all([
    getMineralDictList(),
    getSensorStatusDict()
  ])
  typeList.value = types.data
  statusList.value = status.data
})
</script>

<style lang="scss" scoped>
.sensor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  .tools {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 16px;
    .tools-row {
      display: flex;
      gap: 8px;
    }
  }
}
</style>
